<template>
    <div class="checkInput">
        <el-select v-model="value" style="margin-bottom: 10px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <component :is="currentComponent" @setFormData='setFormData' :label='label' :comData='comData' :classStyle='classStyle'></component>
    </div>
</template>

<script>
    import optionInput from './optionInput.vue'
    import datePicker from './datePicker.vue'
    export default {
        data() {
            return {
                value: 1,
                obj:{},
                options: [{
                    value: 1,
                    label: '选择范围'
                }, {
                    value: 2,
                    label: '动态筛选'
                }],
            }
        },
        props:{
            label:[Array,Number],
            comData: {
                type: Object,
                default: () => {}
            },
            classStyle:{
                type:String,
                default:''
            }
        },
        components: {
            optionInput,
            datePicker,
        },
        methods:{
            setFormData(val) {
                this.$emit('setFormData',val)
            }
        },
        computed: {
            currentComponent: function () {
                let showComponent
                switch (this.value) {
                    case 1:
                        showComponent = datePicker
                        break;
                    case 2:
                        showComponent = optionInput
                        break;
                }
                return showComponent
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-select {
        width: 100%;
    }
</style>